<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>



<!--view层 模板-->
<div v-on:click="hello2" id="app">

    所见即所得:<input type="text" v-model="message">
    <div>{{message}}</div>
    自定义组件:
    <div>
        <custom-button v-for="v2 in items" v-bind:v2="v2">{{v2}}</custom-button>
    </div>
    计算属性:
    <p>methods:currentTime() {{currentTime()}}</p>
    <p>computed:currentTime2 {{currentTime2}}</p>
    <p></p>
    <custom-table>
        <custom-table-title slot="custom-table-title" :title="title"></custom-table-title>
        <custom-table-items slot="custom-table-items" v-for="item in items" v-bind:item="item"></custom-table-items>
    </custom-table>
</div>

<script>
    Vue.component('custom-button', {
        props: ['v2'],
        template: "<button>{{v2}}</button>",
    });
    Vue.component('custom-table', {
        template: "<div>" +
            "<slot name='custom-table-title'></slot>" +
            "<ul><slot name='custom-table-items'></slot></ul>" +
            "</div>",
    });
    Vue.component('custom-table-title', {
        props: ['title'],
        template: "<div>{{title}}</div>",
    });
    Vue.component('custom-table-items', {
        props: ['item'],
        template: "<li>{{item}}</li>",
    });
    var vm = new Vue({
        el: "#app",
        //model层 数据
        data: {
            title: "学习计划表",
            message: "hello,vue!",
            times: 2,
            items: [
                "Java","Linux","Vue"
            ]
        },
        methods : {
            hello2 : function () {
                this.times ++;
                console.log("点击了" + this.times + "次")
            },
            currentTime : function () {
                return Date.now();
            }
        },
        computed: {
            currentTime2 : function () {
                return Date.now();
            }
        },
        mounted() {
            axios.get('../package.json').then(response => {
                console.log("loading");
                console.log(response.data)
            })
            console.log("mounted")
        }
    });
</script>
</body>
</html>